/**
 * 图表类型提示文档数据
 * 包含各种Mermaid图表类型的核心参数、语法说明和示例代码
 */

const chartDocs = {
    flowchart: {
        name: '流程图',
        icon: 'flow',
        description: '用于展示流程、算法或步骤的执行顺序',
        syntax: {
            title: '基本语法',
            content: `
flowchart 方向
    节点ID[节点文本] --> 节点ID{条件判断}
    节点ID -->|条件| 节点ID(圆角矩形)
    节点ID --> 节点ID((圆形))
            `
        },
        directions: {
            title: '方向说明',
            items: [
                { code: 'TD/TB', desc: '从上到下' },
                { code: 'BT', desc: '从下到上' },
                { code: 'LR', desc: '从左到右' },
                { code: 'RL', desc: '从右到左' }
            ]
        },
        nodes: {
            title: '节点类型',
            items: [
                { code: 'ID[文本]', desc: '矩形节点（默认）' },
                { code: 'ID(文本)', desc: '圆角矩形节点' },
                { code: 'ID((文本))', desc: '圆形节点' },
                { code: 'ID{文本}', desc: '菱形节点（判断）' },
                { code: 'ID{{文本}}', desc: '六边形节点' }
            ]
        },
        connections: {
            title: '连接线类型',
            items: [
                { code: '-->', desc: '实线箭头（默认）' },
                { code: '-->>', desc: '虚线箭头' },
                { code: '---', desc: '无箭头线' },
                { code: '<-->', desc: '双向箭头' }
            ]
        },
        example: {
            title: '实际应用示例',
            code: `flowchart TD
    Start([开始]) --> Input[输入用户名密码]
    Input --> Validate{验证信息}
    Validate -->|正确| CheckStatus{检查状态}
    Validate -->|错误| ShowError[显示错误]
    ShowError --> Input
    CheckStatus -->|正常| LoginSuccess[登录成功]
    CheckStatus -->|异常| ShowLock[显示锁定]
    LoginSuccess --> MainPage[进入主页]
    ShowLock --> End([结束])
    MainPage --> End`
        },
        tips: [
            '节点ID必须唯一',
            '使用引号处理包含特殊字符的文本',
            '长文本可以使用\\n进行换行',
            '合理设置方向，避免连接线交叉过多'
        ]
    },
    
    sequenceDiagram: {
        name: '时序图',
        icon: 'sequence',
        description: '用于展示对象之间的交互顺序，强调消息的时间顺序',
        syntax: {
            title: '基本语法',
            content: `
sequenceDiagram
    participant 参与者1
    participant 参与者2
    
    参与者1->>参与者2: 同步消息
    参与者1-->>参与者2: 异步消息
    参与者2-->>参与者1: 返回消息
            `
        },
        participants: {
            title: '参与者声明',
            items: [
                { code: 'participant 名称', desc: '基本参与者声明' },
                { code: 'participant A as 别名', desc: '设置别名' },
                { code: 'actor 用户', desc: '角色参与者' },
                { code: 'boundary 控制器', desc: '边界参与者' },
                { code: 'control 业务逻辑', desc: '控制参与者' },
                { code: 'database 数据库', desc: '数据库参与者' }
            ]
        },
        messages: {
            title: '消息类型',
            items: [
                { code: 'A->>B: 消息', desc: '同步消息（实心箭头）' },
                { code: 'A-->>B: 消息', desc: '异步消息（开放箭头）' },
                { code: 'B-->>A: 消息', desc: '返回消息（虚线）' },
                { code: 'A->>A: 消息', desc: '自消息' }
            ]
        },
        advanced: {
            title: '高级功能',
            items: [
                { code: 'activate B', desc: '激活框开始' },
                { code: 'deactivate B', desc: '激活框结束' },
                { code: 'Note over A,B: 备注', desc: '备注说明' },
                { code: 'loop 条件', desc: '循环' },
                { code: 'alt 条件', desc: '条件判断' },
                { code: 'par 并行', desc: '并行处理' }
            ]
        },
        example: {
            title: '实际应用示例',
            code: `sequenceDiagram
    participant 顾客
    participant 前端
    participant 后端
    participant 支付系统
    participant 数据库
    
    顾客->>前端: 浏览商品
    前端->>后端: 获取商品信息
    后端->>数据库: 查询商品
    数据库-->>后端: 商品数据
    后端-->>前端: 返回商品信息
    前端-->>顾客: 显示商品
    
    顾客->>前端: 加入购物车
    前端->>后端: 更新购物车
    后端->>数据库: 保存购物车
    
    顾客->>前端: 结算订单
    前端->>后端: 创建订单
    后端->>数据库: 保存订单
    
    顾客->>前端: 支付
    前端->>支付系统: 发起支付
    支付系统->>后端: 支付通知
    后端->>数据库: 更新订单状态
    
    Note over 顾客,数据库: 购物流程完成`
        },
        tips: [
            '参与者声明顺序影响显示顺序',
            '消息必须明确发送者和接收者',
            '激活框要正确匹配激活和停用',
            '嵌套结构要正确缩进'
        ]
    },
    
    quadrantChart: {
        name: '象限图',
        icon: 'quadrant',
        description: '二维散点图，用于将项目、产品或概念按照两个维度进行分类和可视化',
        syntax: {
            title: '基本语法',
            content: `
quadrantChart
    title 图表标题
    x-axis 左标签 --> 右标签
    y-axis 下标签 --> 上标签
    quadrant-1 右上象限名称
    quadrant-2 左上象限名称
    quadrant-3 左下象限名称
    quadrant-4 右下象限名称
    "数据点1": [x坐标, y坐标]
    "数据点2": [x坐标, y坐标]
            `
        },
        configuration: {
            title: '坐标轴配置',
            items: [
                { code: 'title "图表标题"', desc: '设置图表标题' },
                { code: 'x-axis "左" --> "右"', desc: 'X轴标签配置' },
                { code: 'y-axis "下" --> "上"', desc: 'Y轴标签配置' },
                { code: 'quadrant-1 名称', desc: '第一象限（右上）' },
                { code: 'quadrant-2 名称', desc: '第二象限（左上）' },
                { code: 'quadrant-3 名称', desc: '第三象限（左下）' },
                { code: 'quadrant-4 名称', desc: '第四象限（右下）' }
            ]
        },
        dataPoints: {
            title: '数据点配置',
            items: [
                { code: '"名称": [0.8, 0.3]', desc: '数据点坐标（0-1范围）' },
                { code: '多个数据点', desc: '支持多个数据点同时显示' },
                { code: '坐标范围', desc: 'X/Y坐标范围0.0-1.0' }
            ]
        },
        examples: {
            title: '应用场景示例',
            items: [
                { name: '产品优先级', desc: '业务价值 vs 实现难度' },
                { name: '技术架构', desc: '成本 vs 风险分析' },
                { name: '市场定位', desc: '市场份额 vs 增长率' },
                { name: '人才评估', desc: '能力 vs 潜力评估' },
                { name: '投资决策', desc: '收益 vs 风险分析' },
                { name: '功能规划', desc: '用户需求 vs 技术复杂度' }
            ]
        },
        useCases: {
            title: '具体用例',
            items: [
                { name: '产品功能优先级', xAxis: '实现难度', yAxis: '用户价值' },
                { name: '技术选型评估', xAxis: '学习成本', yAxis: '社区活跃度' },
                { name: '团队成员定位', xAxis: '当前能力', yAxis: '发展潜力' },
                { name: '市场需求分析', xAxis: '市场成熟度', yAxis: '增长潜力' },
                { name: '风险评估', desc: '发生概率 vs 影响程度' }
            ]
        },
        example: {
            title: '产品功能优先级分析',
            code: `quadrantChart
    title 产品功能优先级分析
    x-axis 低业务价值 --> 高业务价值
    y-axis 低实现难度 --> 高实现难度
    quadrant-1 快速交付
    quadrant-2 规划项目
    quadrant-3 暂缓项目
    quadrant-4 重点项目
    "用户注册": [0.9, 0.2]
    "搜索功能": [0.8, 0.4]
    "推荐系统": [0.7, 0.8]
    "AI助手": [0.6, 0.9]
    "社交分享": [0.5, 0.3]
    "数据分析": [0.4, 0.7]
    "主题定制": [0.3, 0.5]
    "多语言": [0.6, 0.6]
    "离线功能": [0.7, 0.7]
    "第三方集成": [0.5, 0.6]
    "移动端": [0.8, 0.5]
    "管理后台": [0.4, 0.4]`
        },
        tips: [
            '坐标值范围在0.0到1.0之间',
            '数据点名称使用引号包裹',
            '合理设置坐标轴标签描述',
            '象限命名要清晰表达含义'
        ]
    },
    
    classDiagram: {
        name: '类图',
        icon: 'class',
        description: '用于展示类、接口及其之间的关系，常用于面向对象设计',
        syntax: {
            title: '基本语法',
            content: `
classDiagram
    class 类名 {
        +公共属性: 类型
        -私有属性: 类型
        #保护方法(参数): 返回类型
    }
    
    类名 "1" --> "*" 另一个类名 : 关联关系
            `
        },
        classDefinition: {
            title: '类定义',
            items: [
                { code: 'class 类名', desc: '基本类定义' },
                { code: '+公共成员', desc: '公有成员（+）' },
                { code: '-私有成员', desc: '私有成员（-）' },
                { code: '#保护成员', desc: '保护成员（#）' },
                { code: '~包级私有', desc: '包级私有（~）' }
            ]
        },
        relationships: {
            title: '关系类型',
            items: [
                { code: 'A --> B', desc: '关联关系' },
                { code: 'A --|> B', desc: '继承关系（泛化）' },
                { code: 'A --* B', desc: '组合关系' },
                { code: 'A --o B', desc: '聚合关系' },
                { code: 'A ..> B', desc: '依赖关系' },
                { code: 'A ..|> B', desc: '实现关系' }
            ]
        },
        example: {
            title: '实际应用示例',
            code: `classDiagram
    class User {
        +String username
        +String email
        +Date registrationDate
        +login(password: String): Boolean
        +logout(): void
        +updateProfile(info: Profile): void
    }
    
    class Profile {
        +String fullName
        +String avatar
        +String bio
        +updateInfo(info: Map): void
    }
    
    class Order {
        +String orderId
        +Date orderDate
        +Double totalAmount
        +String status
        +calculateTotal(): Double
        +updateStatus(status: String): void
    }
    
    class Product {
        +String productId
        +String name
        +Double price
        +Integer stock
        +updateStock(quantity: Integer): void
        +getInfo(): Map
    }
    
    class ShoppingCart {
        +Map~Product, Integer~ items
        +addItem(product: Product, quantity: Integer): void
        +removeItem(product: Product): void
        +calculateTotal(): Double
        +checkout(): Order
    }
    
    User "1" --> "1" Profile : has
    User "1" --> "*" Order : places
    Order "*" --> "*" Product : contains
    User "1" --> "1" ShoppingCart : owns
    ShoppingCart "1" --> "*" Product : contains`
        },
        tips: [
            '类名应该使用大驼峰命名法',
            '成员变量应该明确类型',
            '关系要正确表达业务含义',
            '多重性标记要准确'
        ]
    },
    
    gantt: {
        name: '甘特图',
        icon: 'gantt',
        description: '用于项目管理和进度跟踪，展示任务的时间安排和依赖关系',
        syntax: {
            title: '基本语法',
            content: `
gantt
    title 项目甘特图
    dateFormat YYYY-MM-DD
    section 阶段1
    任务1 : 任务ID, 开始日期, 结束日期
    任务2 : 任务ID, 开始日期, 持续时间
            `
        },
        configuration: {
            title: '配置选项',
            items: [
                { code: 'title "标题"', desc: '设置图表标题' },
                { code: 'dateFormat YYYY-MM-DD', desc: '日期格式设置' },
                { code: 'axisFormat %Y-%m', desc: '坐标轴格式' },
                { code: 'section 阶段名称', desc: '定义阶段分组' }
            ]
        },
        tasks: {
            title: '任务定义',
            items: [
                { code: '任务名 : 日期1, 日期2', desc: '指定开始和结束日期' },
                { code: '任务名 : 日期, 持续时间', desc: '指定开始日期和持续时间' },
                { code: '任务名 : 任务ID, 日期, 日期', desc: '带ID的任务定义' },
                { code: '关键任务 :crit, 日期, 日期', desc: '标记为关键路径' },
                { code: '活跃任务 :active, 日期, 日期', desc: '标记为活跃状态' }
            ]
        },
        example: {
            title: '项目开发甘特图',
            code: `gantt
    title 网站开发项目进度
    dateFormat YYYY-MM-DD
    section 需求分析
    需求调研 :done, des1, 2024-01-01, 2024-01-07
    需求文档 :active, des2, 2024-01-08, 3d
    需求评审 :des3, after des2, 2d
    
    section 系统设计
    架构设计 :crit, done, sys1, 2024-01-10, 5d
    数据库设计 :crit, sys2, after sys1, 3d
    API设计 :sys3, after sys2, 2d
    
    section 开发实现
    前端开发 :crit, dev1, after sys3, 10d
    后端开发 :crit, dev2, after sys3, 12d
    接口联调 :dev3, after dev1, 3d
    
    section 测试部署
    单元测试 :test1, after dev2, 4d
    集成测试 :test2, after test1, 3d
    系统部署 :deploy, after test2, 2d
    用户验收 :accept, after deploy, 3d`
        },
        tips: [
            '日期格式要统一',
            '关键路径任务要标记',
            '任务依赖关系要清晰',
            '阶段分组要有逻辑性'
        ]
    },
    
    pie: {
        name: '饼图',
        icon: 'pie',
        description: '用于展示数据的占比关系，直观显示各部分在整体中的比例，适合预算分配、市场份额、用户构成等分析',
        syntax: {
            title: '基本语法',
            content: `
pie title 图表标题
    "标签1" : 数值1
    "标签2" : 数值2
    "标签3" : 数值3
            `
        },
        configuration: {
            title: '配置选项',
            items: [
                { code: 'pie title "标题"', desc: '设置图表标题' },
                { code: '"标签" : 数值', desc: '数据项定义' },
                { code: 'showData', desc: '显示具体数值' }
            ]
        },
        dataFormat: {
            title: '数据格式',
            items: [
                { code: '"标签" : 数值', desc: '基本数据格式' },
                { code: '百分比数据', desc: '自动计算百分比' },
                { code: '小数或整数', desc: '支持各种数值类型' }
            ]
        },
        applications: {
            title: '应用场景',
            items: [
                { name: '预算分配', desc: '各部门预算占比分析' },
                { name: '市场份额', desc: '不同品牌市场占有率' },
                { name: '用户构成', desc: '用户年龄、地域、设备分布' },
                { name: '收入来源', desc: '不同产品线收入占比' },
                { name: '时间分配', desc: '工作时间在不同任务上的分配' }
            ]
        },
        examples: {
            title: '具体示例',
            items: [
                {
                    name: '部门预算分配',
                    code: `pie title 2024年部门预算分配
    "研发部门" : 45
    "市场部门" : 25
    "运营部门" : 15
    "行政部门" : 8
    "财务部门" : 7`
                },
                {
                    name: '用户年龄分布',
                    code: `pie title 用户年龄分布
    "18-25岁" : 28
    "26-35岁" : 35
    "36-45岁" : 22
    "46-55岁" : 10
    "55岁以上" : 5`
                },
                {
                    name: '收入来源分析',
                    code: `pie showData
    title 收入来源分析
    "产品销售收入" : 65
    "服务收入" : 20
    "授权费用" : 10
    "其他收入" : 5`
                }
            ]
        },
        tips: [
            '标签要用引号包裹，避免特殊字符',
            '数值可以是整数或小数，会自动计算百分比',
            '数据项数量建议5-8个，过多会影响可读性',
            '可以使用showData显示具体数值和百分比',
            '将重要的或数值较大的项目放在前面'
        ]
    },
    
    stateDiagram: {
        name: '状态图',
        icon: 'state',
        description: '用于展示对象或系统的状态变化，以及触发状态转换的事件，适合用户流程、订单处理、任务状态等场景',
        syntax: {
            title: '基本语法',
            content: `
stateDiagram-v2
    [*] --> 初始状态
    状态1 --> 状态2 : 转换事件
    状态2 --> [*] : 结束事件
            `
        },
        states: {
            title: '状态定义',
            items: [
                { code: '[*]', desc: '初始状态或终止状态' },
                { code: '状态名', desc: '普通状态' },
                { code: 'state 状态名 { }', desc: '复合状态（包含子状态）' }
            ]
        },
        transitions: {
            title: '状态转换',
            items: [
                { code: '状态A --> 状态B', desc: '基本状态转换' },
                { code: '状态A --> 状态B : 事件', desc: '带触发事件的转换' },
                { code: '状态A --> 状态B : 事件/动作', desc: '带事件和动作的转换' }
            ]
        },
        applications: {
            title: '应用场景',
            items: [
                { name: '订单处理', desc: '电商订单从创建到完成的全流程' },
                { name: '用户注册', desc: '用户从访问到激活的注册流程' },
                { name: '任务管理', desc: '任务从创建到完成的流转状态' },
                { name: '审批流程', desc: '文档或申请的审批状态变化' },
                { name: '设备状态', desc: '设备从正常到故障的状态变化' }
            ]
        },
        examples: {
            title: '具体示例',
            items: [
                {
                    name: '订单状态流转',
                    code: `stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付 : 支付成功
    待支付 --> 已取消 : 超时取消
    待支付 --> 已取消 : 用户取消
    
    已支付 --> 已发货 : 商家发货
    已支付 --> 退款中 : 申请退款
    
    已发货 --> 已收货 : 用户确认收货
    已发货 --> 退货中 : 申请退货
    
    已收货 --> 已完成 : 订单完成
    已收货 --> 退款中 : 申请退款
    
    退货中 --> 已退货 : 退货完成
    退货中 --> 已收货 : 取消退货
    
    退款中 --> 已退款 : 退款完成
    退款中 --> 已支付 : 拒绝退款
    
    已取消 --> [*]
    已完成 --> [*]
    已退款 --> [*]
    已退货 --> [*]`
                },
                {
                    name: '用户注册流程',
                    code: `stateDiagram-v2
    [*] --> 访问注册页
    访问注册页 --> 填写信息 : 开始注册
    填写信息 --> 信息验证 : 提交表单
    
    信息验证 --> 发送验证码 : 信息有效
    信息验证 --> 填写信息 : 信息无效
    
    发送验证码 --> 等待验证 : 验证码已发送
    等待验证 --> 验证成功 : 输入正确验证码
    等待验证 --> 验证失败 : 输入错误验证码
    等待验证 --> 重新发送 : 请求重新发送
    
    验证成功 --> 创建账户 : 验证通过
    创建账户 --> 注册成功 : 账户创建完成
    
    注册成功 --> 待激活 : 需要邮箱激活
    待激活 --> 已激活 : 点击激活链接
    待激活 --> 注册失败 : 激活超时
    
    已激活 --> [*]
    注册失败 --> [*]`
                },
                {
                    name: '任务管理流程',
                    code: `stateDiagram-v2
    [*] --> 待分配
    待分配 --> 进行中 : 分配给执行人
    待分配 --> 已取消 : 任务取消
    
    进行中 --> 待审核 : 提交完成
    进行中 --> 已暂停 : 暂停任务
    
    已暂停 --> 进行中 : 恢复任务
    已暂停 --> 已取消 : 取消任务
    
    待审核 --> 已完成 : 审核通过
    待审核 --> 进行中 : 审核不通过
    
    已完成 --> [*]
    已取消 --> [*]`
                }
            ]
        },
        tips: [
            '使用stateDiagram-v2语法获得更好的渲染效果',
            '初始状态和终止状态用[*]表示，流程清晰',
            '状态转换可以添加事件和动作，说明触发条件',
            '复合状态可以包含子状态，处理复杂场景',
            '状态名称要简洁明了，避免使用过于复杂的名称'
        ]
    },
    
    erDiagram: {
        name: 'ER图',
        icon: 'er',
        description: '实体-关系图，用于数据库设计和数据建模，展示实体之间的关系',
        syntax: {
            title: '基本语法',
            content: `
erDiagram
    实体1 {
        数据类型 属性1
        数据类型 属性2
    }
    
    实体1 ||--o{ 实体2 : 关系名称
            `
        },
        entities: {
            title: '实体定义',
            items: [
                { code: '实体名 { }', desc: '实体定义块' },
                { code: 'INT 属性名', desc: '整数类型' },
                { code: 'VARCHAR(n) 属性名', desc: '字符串类型' },
                { code: 'DATE 属性名', desc: '日期类型' },
                { code: 'BOOLEAN 属性名', desc: '布尔类型' }
            ]
        },
        relationships: {
            title: '关系类型',
            items: [
                { code: '||--o{', desc: '一对多（可选）' },
                { code: '||--|{', desc: '一对多（强制）' },
                { code: 'o|--o{', desc: '多对多（可选）' },
                { code: '|o--o{', desc: '多对多（一侧强制）' },
                { code: '||--||', desc: '一对一' }
            ]
        },
        example: {
            title: '电商系统ER图',
            code: `erDiagram
    USER {
        INT user_id PK
        VARCHAR(50) username UK
        VARCHAR(100) email UK
        VARCHAR(255) password
        DATETIME created_at
        DATETIME updated_at
    }
    
    PROFILE {
        INT profile_id PK
        INT user_id FK
        VARCHAR(100) full_name
        VARCHAR(20) phone
        TEXT address
        VARCHAR(255) avatar_url
    }
    
    PRODUCT {
        INT product_id PK
        VARCHAR(100) name
        TEXT description
        DECIMAL(10,2) price
        INT stock_quantity
        VARCHAR(50) category
        DATETIME created_at
    }
    
    ORDER {
        INT order_id PK
        INT user_id FK
        DATETIME order_date
        DECIMAL(10,2) total_amount
        VARCHAR(50) status
        VARCHAR(200) shipping_address
    }
    
    ORDER_ITEM {
        INT item_id PK
        INT order_id FK
        INT product_id FK
        INT quantity
        DECIMAL(10,2) unit_price
    }
    
    CART {
        INT cart_id PK
        INT user_id FK
        INT product_id FK
        INT quantity
        DATETIME added_at
    }
    
    USER ||--|| PROFILE : has
    USER ||--o{ ORDER : places
    USER ||--o{ CART : owns
    ORDER ||--o{ ORDER_ITEM : contains
    ORDER_ITEM }o--|| PRODUCT : contains
    CART }o--|| PRODUCT : contains`
        },
        tips: [
            '实体名通常使用大写',
            '主键属性标注PK',
            '外键属性标注FK',
            '唯一属性标注UK',
            '关系要符合业务逻辑'
        ]
    },
    
    mindmap: {
        name: '思维导图',
        icon: 'mindmap',
        description: '用于展示层级结构和关联关系，适合展示知识体系、概念框架、项目规划和学习笔记',
        syntax: {
            title: '基本语法',
            content: `
mindmap
  root((中心主题))
    一级分支
      二级分支1
      二级分支2
    另一个分支
      子分支
            `
        },
        structure: {
            title: '节点类型',
            items: [
                { code: 'root((根节点))', desc: '中心主题节点，整个导图的核心' },
                { code: '一级分支', desc: '主要分类或主题分支' },
                { code: '子分支', desc: '更详细的子分类' },
                { code: 'leaf()', desc: '叶子节点，最具体的知识点' }
            ]
        },
        nodeShapes: {
            title: '节点形状',
            items: [
                { code: '((圆角节点))', desc: '圆角矩形，适合主题节点' },
                { code: '(())圆形节点', desc: '圆形节点，适合关键概念' },
                { code: '[[]]方形节点', desc: '方形节点，适合分类节点' },
                { code: '{{}}六边形节点', desc: '六边形，适合特殊标记' },
                { code: 'leaf()', desc: '叶子标识，最末端节点' }
            ]
        },
        formatting: {
            title: '格式化选项',
            items: [
                { code: '**加粗文本**', desc: '重要概念或标题' },
                { code: '//斜体文本//', desc: '次要信息或注释' },
                { code: '==高亮文本==', desc: '重点强调内容' },
                { code: '~~删除线~~', desc: '过时或废弃内容' }
            ]
        },
        applications: {
            title: '应用场景',
            items: [
                { code: '知识整理', desc: '学习笔记、知识体系构建' },
                { code: '项目规划', desc: '项目结构、任务分解' },
                { code: '会议记录', desc: '会议要点、决策事项' },
                { code: '写作大纲', desc: '文章结构、内容规划' }
            ]
        },
        example: {
            title: 'Web前端学习路径',
            code: `mindmap
  root((前端开发学习))
    基础技能
      HTML
        语义化标签
        表单元素
        多媒体标签
      CSS
        选择器
        布局技术
          Flexbox
          Grid
          响应式
        动画效果
      JavaScript
        基础语法
        DOM操作
        事件处理
        异步编程
    
    框架学习
      React
        JSX语法
        组件开发
        Hooks
        状态管理
      Vue
        模板语法
        组件系统
        响应式原理
        Vuex
      Angular
        TypeScript
        依赖注入
        RxJS
    
    工程化
      构建工具
        Webpack
        Vite
        Rollup
      包管理
        npm
        yarn
        pnpm
      代码规范
        ESLint
        Prettier
        Husky
    
    进阶技能
      性能优化
        代码分割
        懒加载
        缓存策略
      测试
        单元测试
        集成测试
        E2E测试
      部署运维
        CI/CD
        Docker
        监控分析`
        },
        tips: [
            '从中心主题开始，逐层向外扩展，保持逻辑清晰',
            '每个分支控制在3-7个子节点，避免信息过载',
            '使用不同形状和颜色区分节点类型和重要性',
            '保持层级深度在3-4层以内，确保可读性',
            '定期整理和更新导图，保持知识的时效性'
        ]
    },
    
    gitGraph: {
        name: 'Git图',
        icon: 'git',
        description: '用于展示Git版本控制的分支、合并、提交等操作历史',
        syntax: {
            title: '基本语法',
            content: `
gitGraph
    commit id: "初始提交"
    branch 分支名
    checkout 分支名
    commit id: "提交说明"
    checkout main
    merge 分支名
            `
        },
        commands: {
            title: '常用命令',
            items: [
                { code: 'commit', desc: '创建提交节点' },
                { code: 'branch 分支名', desc: '创建新分支' },
                { code: 'checkout 分支名', desc: '切换到分支' },
                { code: 'merge 分支名', desc: '合并分支' },
                { code: 'cherry-pick 提交ID', desc: '拣选提交' }
            ]
        },
        options: {
            title: '提交选项',
            items: [
                { code: 'commit id: "说明"', desc: '带说明的提交' },
                { code: 'commit tag: "v1.0"', desc: '带标签的提交' },
                { code: 'commit type: REVERSE', desc: '反转提交' }
            ]
        },
        example: {
            title: '功能开发流程',
            code: `gitGraph
    commit id: "初始提交"
    branch feature/user-auth
    checkout feature/user-auth
    commit id: "添加用户模型"
    commit id: "实现登录功能"
    commit id: "添加注册验证"
    
    checkout main
    branch feature/product-management
    checkout feature/product-management
    commit id: "添加商品模型"
    commit id: "实现商品CRUD"
    
    checkout main
    merge feature/user-auth
    commit id: "合并用户认证功能"
    
    checkout feature/product-management
    commit id: "添加商品搜索"
    
    checkout main
    merge feature/product-management
    commit id: "合并商品管理功能"
    
    branch hotfix/security-patch
    checkout hotfix/security-patch
    commit id: "修复安全漏洞"
    
    checkout main
    merge hotfix/security-patch
    commit id: "合并安全补丁"`
        },
        tips: [
            '使用有意义的提交说明',
            '合理使用分支进行功能开发',
            '及时合并主分支更新',
            '标签用于标记重要版本'
        ]
    },
    
    journey: {
        name: '用户旅行图',
        icon: 'journey',
        description: '用于展示用户在使用产品或服务过程中的体验流程，强调用户情感和满意度变化',
        syntax: {
            title: '基本语法',
            content: `
journey
    title 用户旅程标题
    section 阶段名称
        任务名称: 评分: 情绪状态
        任务名称: 评分: 情绪状态
            `
        },
        sections: {
            title: '阶段定义',
            items: [
                { code: 'section 阶段名', desc: '定义旅程阶段' },
                { code: 'section 注册流程', desc: '用户注册相关步骤' },
                { code: 'section 购买过程', desc: '购买决策相关步骤' },
                { code: 'section 使用体验', desc: '产品使用相关步骤' }
            ]
        },
        tasks: {
            title: '任务评分',
            items: [
                { code: '任务名: 评分: 状态', desc: '基本任务格式' },
                { code: '评分范围', desc: '0-10分，10分为最佳体验' },
                { code: '情绪状态', desc: '描述用户情绪（如：满意、困惑、沮丧）' },
                { code: '访问: 8: 满意', desc: '示例：高评分正面体验' }
            ]
        },
        emotions: {
            title: '情绪状态',
            items: [
                { code: '满意', desc: '用户体验良好' },
                { code: '困惑', desc: '用户感到迷惑' },
                { code: '沮丧', desc: '用户感到挫败' },
                { code: '兴奋', desc: '用户感到激动' },
                { code: '中性', desc: '用户情绪平稳' }
            ]
        },
        example: {
            title: '电商购物体验',
            code: `journey
    title 用户购物体验旅程
    section 浏览阶段
        访问首页: 8: 满意
        搜索商品: 7: 满意
        查看商品详情: 6: 中性
        比较商品: 5: 困惑
    
    section 决策阶段
        查看评价: 8: 满意
        咨询客服: 4: 沮丧
        加入购物车: 7: 满意
        查看购物车: 6: 中性
    
    section 支付阶段
        填写地址: 5: 困惑
        选择支付方式: 8: 满意
        确认订单: 7: 满意
        完成支付: 9: 兴奋
    
    section 售后阶段
        查看订单状态: 8: 满意
        收到商品: 9: 兴奋
        商品评价: 6: 中性
        售后服务: 3: 沮丧`
        },
        tips: [
            '评分范围0-10分，10分为最佳体验',
            '情绪状态要准确反映用户感受',
            '阶段划分要符合实际用户流程',
            '重点关注低评分和负面情绪环节'
        ]
    },
    
    timeline: {
        name: '时间线图',
        icon: 'timeline',
        description: '用于展示项目进度、历史事件或计划安排的时间顺序，强调时间节点和持续时间',
        syntax: {
            title: '基本语法',
            content: `
timeline
    title 时间线标题
    section 阶段名称
        事件名称 : 开始日期 - 结束日期
        事件名称 : 开始日期 - 结束日期
            `
        },
        configuration: {
            title: '配置选项',
            items: [
                { code: 'title "标题"', desc: '设置时间线标题' },
                { code: 'section 阶段名', desc: '定义时间阶段' },
                { code: '日期格式', desc: '支持多种日期格式' }
            ]
        },
        dateFormats: {
            title: '日期格式',
            items: [
                { code: 'YYYY-MM-DD', desc: '标准日期格式' },
                { code: 'MM/DD/YYYY', desc: '美式日期格式' },
                { code: 'DD/MM/YYYY', desc: '欧式日期格式' },
                { code: '相对时间', desc: '支持相对时间描述' }
            ]
        },
        events: {
            title: '事件定义',
            items: [
                { code: '事件名 : 日期 - 日期', desc: '指定起止时间' },
                { code: '事件名 : 日期', desc: '单日事件' },
                { code: '持续时间', desc: '自动计算事件持续天数' }
            ]
        },
        example: {
            title: '项目开发时间线',
            code: `timeline
    title 网站开发项目时间线
    section 需求阶段
        项目启动 : 2024-01-01 - 2024-01-03
        需求收集 : 2024-01-04 - 2024-01-10
        需求分析 : 2024-01-11 - 2024-01-15
        需求评审 : 2024-01-16 - 2024-01-18
    
    section 设计阶段
        架构设计 : 2024-01-21 - 2024-01-25
        UI/UX设计 : 2024-01-26 - 2024-02-05
        数据库设计 : 2024-02-06 - 2024-02-08
        设计评审 : 2024-02-09 - 2024-02-12
    
    section 开发阶段
        前端开发 : 2024-02-15 - 2024-03-15
        后端开发 : 2024-02-15 - 2024-03-10
        接口联调 : 2024-03-11 - 2024-03-15
        代码审查 : 2024-03-16 - 2024-03-20
    
    section 测试阶段
        单元测试 : 2024-03-21 - 2024-03-25
        集成测试 : 2024-03-26 - 2024-04-05
        系统测试 : 2024-04-06 - 2024-04-15
        用户验收 : 2024-04-16 - 2024-04-20
    
    section 部署阶段
        环境准备 : 2024-04-21 - 2024-04-22
        应用部署 : 2024-04-23 - 2024-04-24
        性能调优 : 2024-04-25 - 2024-04-28
        正式上线 : 2024-04-29 - 2024-04-30`
        },
        tips: [
            '日期格式要保持一致',
            '阶段划分要清晰合理',
            '事件名称要简洁明了',
            '考虑事件之间的依赖关系'
        ]
    }
};

// 默认文档（当图表类型未找到时）
const defaultDoc = {
    name: '未知图表',
    icon: 'help',
    description: '请检查图表类型语法是否正确',
    syntax: {
        title: '支持的图表类型',
        content: `
flowchart     - 流程图
sequenceDiagram - 时序图
quadrantChart  - 象限图
classDiagram  - 类图
gantt         - 甘特图
pie           - 饼图
stateDiagram  - 状态图
erDiagram     - ER图
mindmap       - 思维导图
gitGraph      - Git图
        `
    },
    tips: [
        '请检查语法是否正确',
        '参考左侧的示例代码',
        '查看文档了解更多信息'
    ]
};

/**
 * 获取指定图表类型的文档
 * @param {string} chartType - 图表类型
 * @returns {Object} 图表文档对象
 */
function getChartDoc(chartType) {
    return chartDocs[chartType] || defaultDoc;
}

/**
 * 获取所有支持的图表类型
 * @returns {Array} 图表类型数组
 */
function getSupportedChartTypes() {
    return Object.keys(chartDocs);
}

/**
 * 检查是否支持指定图表类型
 * @param {string} chartType - 图表类型
 * @returns {boolean} 是否支持
 */
function isSupportedChartType(chartType) {
    return chartDocs.hasOwnProperty(chartType);
}

// 导出函数供其他模块使用
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        chartDocs,
        getChartDoc,
        getSupportedChartTypes,
        isSupportedChartType
    };
} else if (typeof window !== 'undefined') {
    // 浏览器环境：挂载到window对象
    window.chartDocs = chartDocs;
}